<template>
  <div class="feedback-container">
    <div class="feedback-header">
      <h2>用户反馈</h2>
      <p>您的反馈对我们非常重要，我们将根据您的建议不断改进我们的服务。</p>
    </div>

    <el-card class="feedback-card">
      <el-form :model="feedbackForm" :rules="rules" ref="feedbackForm" label-width="100px">
        <el-form-item label="反馈类型" prop="feedType">
          <el-select v-model="feedbackForm.feedType" placeholder="请选择反馈类型">
            <el-option label="优化建议" value="优化建议"></el-option>
            <el-option label="信息不符" value="信息不符"></el-option>
            <el-option label="问题提供" value="问题提供"></el-option>
            <el-option label="其他" value="其他"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="反馈内容" prop="feedText">
          <el-input
            type="textarea"
            v-model="feedbackForm.feedText"
            :rows="6"
            placeholder="请输入您的反馈内容（最多1000字）"
            maxlength="1000"
            show-word-limit
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitFeedback('feedbackForm')">提交反馈</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
const axios = require('axios')
const qs = require('qs')
const ele = require('element-ui')

export default {
  name: 'Feedback',
  data() {
    return {
      feedbackForm: {
        feedType: '',
        feedText: '',
        userName: ''
      },
      rules: {
        feedType: [
          { required: true, message: '请选择反馈类型', trigger: 'change' }
        ],
        feedText: [
          { required: true, message: '请输入反馈内容', trigger: 'blur' },
          { max: 1000, message: '反馈内容不能超过1000字', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    // 检查用户是否已登录
    this.feedbackForm.userName = window.localStorage.getItem('userName')
  },
  methods: {
    submitFeedback(formName) {
      // 检查用户是否已登录
      if (!this.feedbackForm.userName) {
        ele.Message.error('请先登录后再提交反馈')
        this.$router.push('/login')
        return
      }

      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 确保反馈内容不超过1000字
          if (this.feedbackForm.feedText.length > 1000) {
            this.feedbackForm.feedText = this.feedbackForm.feedText.substring(0, 1000)
          }

          // 提交反馈
          let _this = this
          axios({
            method: 'post',
            url: 'http://localhost:8080/addFeedback',
            headers: {
              'Content-type': 'application/x-www-form-urlencoded'
            },
            data: qs.stringify({
              feedbackUser: this.feedbackForm.userName,
              feedbackType: this.feedbackForm.feedType,
              feedbackText: this.feedbackForm.feedText
            })
          }).then(function(response) {
            if (response.data.status === 'success') {
              ele.Message.success('反馈提交成功，感谢您的宝贵意见！')
              // 重置表单
              _this.$refs[formName].resetFields()
            } else {
              ele.Message.error('反馈提交失败，请稍后重试')
            }
          }).catch(function(error) {
            console.log(error)
            ele.Message.error('网络错误，请稍后重试')
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style scoped>
.feedback-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.feedback-header {
  text-align: center;
  margin-bottom: 30px;
}

.feedback-header h2 {
  font-size: 24px;
  color: #409EFF;
  margin-bottom: 10px;
}

.feedback-header p {
  color: #606266;
}

.feedback-card {
  margin-bottom: 20px;
}
</style>
